<template>
  <d2-container>
  <div class="passwordsSetting">
    <el-form :model="ruleForm2" :rules="rules2" class="demo-ruleForm" label-width="100px" ref="ruleForm2"
             style="height:100%;margin-top:100px;transform:translateX(-20%)" status-icon="">
      <el-form-item label="原密码：" prop="pass1" style="margin-top:20px;">
        <el-input v-model="ruleForm2.pass1">
        </el-input>
      </el-form-item>
      <el-form-item label="新密码：" prop="pass" style="margin-top:20px;">
        <el-input auto-complete="off" type="password" v-model="ruleForm2.pass">
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码：" prop="checkPass" style="margin-top:20px;">
        <el-input auto-complete="off" type="password" v-model="ruleForm2.checkPass">
        </el-input>
      </el-form-item>

      <el-form-item style="margin-bottom:400px;">
        <el-button @click="submitForm('ruleForm2')" style="margin-top:30px;width:100%;height:43px;" type="primary">
          确认修改
        </el-button>
      </el-form-item>
    </el-form>
  </div>
  </d2-container>
</template>

<script>
  import {changepassword} from '../../../api/api'

  export default {
    data() {
      var pass1 = (rule, value, callback) => {
        if (!value) {
          return callback(new Error("原密码不能为空"));
        }
        callback();
      };
      var validatePass = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请输入密码"));
        } else {
          if (this.ruleForm2.checkPass !== "") {
            this.$refs.ruleForm2.validateField("checkPass");
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === "") {
          callback(new Error("请再次输入密码"));
        } else if (value !== this.ruleForm2.pass) {
          callback(new Error("两次输入密码不一致!"));
        } else {
          callback();
        }
      };
      return {
        ruleForm2: {
          pass1: "",
          checkPass: "",
          pass: ""
        },
        rules2: {
          pass: [{validator: validatePass, trigger: "blur"}],
          checkPass: [{validator: validatePass2, trigger: "blur"}],
          pass1: [{validator: pass1, trigger: "blur"}]
        }
      };
    },
    created(){
      this.getUser()
    },
    methods: {
      //获取用户信息
      getUser(){
        userinfo().then(res=>{
          if(res.Status == 200){
            this.$emit('getMoney',res.Data.money)
          }else{
            this.$message.error(res.Message)
          }
        })
      },
      submitForm(formName) {
        let _this = this;

        var changepasswordParame = {
          oldpassword: _this.ruleForm2.pass1,
          newpassword: _this.ruleForm2.pass,
          changepassword: _this.ruleForm2.checkPass
        }

        changepassword(changepasswordParame).then(res => {
          if (res.Status == 200) {
            this.$message.success(res.Message)
            setTimeout(function () {
              window.location = "/";
            }, 500);
          } else {
            this.$message.error(res.Message)
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  };
</script>
<style lang="scss">
  .passwordsSetting {
    width: 400px;
    margin: 0 auto;
    /*border:1px solid #000;*/
  }
</style>
